<template>
	<view class="container">
		<Navbar fixed>
			<view class="answer-navbar">
				<text class="answer-navbar-time">{{ time }}</text>
				<view class="answer-navbar-menus">
					<view class="pages"
						><text>{{ currentIndex }}</text
						>/{{ total }}</view
					>
					<!-- <image
						@click="handleFavorite"
						:src="question.favorite == 'no' ? '/static/imgs/examination/noFavorite.png' : '/static/imgs/examination/favorite.png'" /> -->
				</view>
			</view>
		</Navbar>
		<view class="answer">
			<view class="answer-area">
				<Question :question="question" @check="checkAnswer" />
				<view v-if="isWrong && currentIndex < total" class="next">
					<!-- v-if="isWrong && (currentIndex < total)" -->

					<button @click="goNextQuestion">下一题</button>
				</view>
				<view v-if="isWrong && currentIndex == total" class="next">
					<button @click="goEndQuestion">答题结束</button>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import { onLoad } from '@dcloudio/uni-app';
	// 导入Navbar组件和Question组件
	import Navbar from '@/components/Navbar/Navbar.vue';
	import Question from './componentes/question.vue';
	// 导入vue的ref函数
	import { ref } from 'vue';
	import { getQuestionList } from '@/api/exam.js';

	// 导入自定义的useAnswerHook钩子函数
	import useAnswerHook from './useAnswerHook.js';
	import { navigateTo } from '@/utils';

	import { answerQuestion, favorite } from '@/api/exam.js';

	// 使用useAnswerHook钩子函数，解构出time, startTimer, stopTimer
	const { time, startTimer, stopTimer } = useAnswerHook();

	const paperId = ref();

	const questionList = ref([]);

	const total = ref(0);

	const currentIndex = ref(0);
	// 使用ref定义一个包含题目信息的对象
	const question = ref({});

	const isWrong = ref(false); // 标记是否回答错误

	// 初始化题目计数
	const trueNum = ref(0); // 记录正确回答的题目数
	const wrongNum = ref(0); // 记录错误回答的题目数

	/**
	 * 检查答案是否正确，并根据结果更新相关状态
	 * @param {number} bankId 题库ID
	 * @param {string} answer 用户答案
	 * @param {boolean} flag 标志位，表示答案是否正确
	 */
	const checkAnswer = (bankId, answer, flag) => {
		console.log(bankId, answer, flag);
		isWrong.value = !flag; // 更新答案是否错误的状态
		if (flag) {
			trueNum.value++; // 答对题目数量加一
			if (currentIndex.value < total.value) {
				goNextQuestion(); // 如果当前题目不是最后一题，则进入下一题
			} else {
				goEndQuestion(); // 如果是最后一题，则结束答题环节
			}
		} else {
			wrongNum.value++; // 答错题目数量加一
		}

		answerQuestion(answer, bankId); // 记录答案
		if (currentIndex.value >= total.value) {
			stopTimer(); // 如果已经答完所有题目，停止计时
		}
	};

	/**
	 * 获取题目列表
	 * @param {number} paperId 试卷ID
	 */
	const getQuestions = (paperId) => {
		getQuestionList(paperId).then((res) => {
			console.log('--->', res);
			questionList.value = res.rows; // 更新题目列表
			total.value = res.total; // 更新总题数
			if (total.value > 0) {
				currentIndex.value = 1; // 如果有题目，则初始化当前题目索引为1
				question.value = questionList.value[0]; // 加载第一题
			}
		});
	};

	/**
	 * 进入下一题
	 */
	const goNextQuestion = () => {
		if (currentIndex.value >= total.value) return; // 如果已经是最后一题，则不操作
		currentIndex.value++;
		question.value = questionList.value[currentIndex.value - 1]; // 更新当前题目
	};

	/**
	 * 结束答题环节，并展示答题结果
	 */
	const goEndQuestion = () => {
		if (currentIndex.value !== total.value) return; // 如果不是最后一题，则不操作
		uni.showModal({
			title: '答题结束',
			showCancel: false,
			content: `本次答题正确${trueNum.value}道，错误${wrongNum.value}道`,
			success: () => {
				navigateTo(`/pages/examination/examination?paperId=${paperId.value}`); // 跳转到答题结果页面
			},
		});
	};

	/**
	 * 将当前题目标记为收藏
	 */
	const handleFavorite = () => {
		favorite(question.value.bankId).then((res) => {
			if (res.code == 200) question.value.favorite = 'yes'; // 标记为已收藏
		});
	};

	/**
	 * 页面加载时执行的操作，初始化答题环节
	 * @param {object} option 页面加载参数，包含paperId试卷ID
	 */
	onLoad((option) => {
		paperId.value = option.paperId; // 初始化试卷ID
		getQuestions(option.paperId); // 获取题目列表
	});

	// 页面加载完成后自动开始计时
	startTimer();
</script>

<style lang="scss" scoped>
	.answer {
		width: 100%;
		height: 100%;
		padding: 84rpx 34rpx;

		&-area {
			width: 100%;
			max-height: 100%;
			overflow: auto;
		}

		&-navbar {
			width: 100%;
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 0 50rpx 0 100rpx;

			&-menus {
				display: flex;
				align-items: center;
				gap: 30rpx;

				image {
					width: 42rpx;
					height: 42rpx;
				}

				.pages {
					color: #a6a1a1;
					text-align: center;
					font-family: 'PINGFANG-MEDIUM';
					font-size: 26rpx;
					font-weight: 400;

					text {
						color: #ffffff;
						text-align: center;
						font-family: 'PINGFANG-bOLD';
						font-size: 34rpx;
						font-weight: 400;
						margin-right: 10rpx;
					}
				}
			}
		}

		.next {
			width: 100%;

			button {
				background-color: #b8cef6;
				height: 98rpx;
				padding: 28rpx 55rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				gap: 20rpx;
				color: #000000;
				font-family: 'PINGFANG-MEDIUM';
				font-size: 28rpx;
				font-style: normal;
				font-weight: 700;
				line-height: normal;
				letter-spacing: 5rpx;
			}
		}
	}
</style>
